import React, { Component } from 'react';
import _ from 'lodash';
import { Tooltip } from 'antd';
import { BaseTable, utils, NumberView, DifferenceDisplayer } from '@/components/BaseTable';

const company = '金额 (万元)';

export default class Difference extends Component {
  state = {
    titleTree: [
      {
        name: '业态',
        key: 'commercial',
        dataKey: 'commercial',
        rowspan: 2,
        colspan: 1,
        width: 260,
        cellRenderer: rowData => (
          <Tooltip placement="topLeft" title={rowData.rowData.commercial}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {rowData.rowData.commercial}
            </div>
          </Tooltip>
        ),
      },
      {
        name: '当前年月均销售',
        key: 'thatYearMonthSaleAmount',
        dataKey: 'thatYearMonthSaleAmount',
        title: company,
        colspan: 1 * 1,
        width: 160,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.thatYearMonthSaleAmount / 10000,
        cellRenderer: rowData => <NumberView precision={0} {...rowData} />,
      },
      {
        name: '当前年综合去化率',
        key: 'thatYearTotalRate',
        dataKey: 'thatYearTotalRate',
        title: '( % )',
        colspan: 1 * 1,
        width: 160,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.thatYearTotalRate.match(/\d+\.\d+/g) / 1,
        cellRenderer: rowData => (
          <>
            <NumberView precision={2} {...rowData} />%
          </>
        ),
      },
      {
        name: '去年月均销售',
        key: 'lastYearMonthSaleAmount',
        dataKey: 'lastYearMonthSaleAmount',
        title: company,
        colspan: 1 * 1,
        width: 160,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.lastYearMonthSaleAmount / 10000,
        cellRenderer: rowData => <NumberView precision={0} {...rowData} />,
      },
      {
        name: '去年综合去化率',
        key: 'lastYearTotalRate',
        dataKey: 'lastYearTotalRate',
        title: '( % )',
        colspan: 1 * 1,
        width: 187,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.lastYearTotalRate.match(/\d+\.\d+/g) / 1,
        cellRenderer: rowData => (
          <>
            <NumberView precision={2} {...rowData} />%
          </>
        ),
      },
      {
        name: '月均销售同比差',
        key: 'yearCarryForwardRate',
        dataKey: 'yearCarryForwardRate',
        title: '( % )',
        colspan: 1 * 1,
        width: 190,
        align: 'right',
        dataGetter: ({ rowData }) => {
          let obj = {};
          obj = {
            value: _.toNumber(`${rowData.monthSaleRateDeviationAmount}`.replace('%', '')) / 10000,
            percentage: _.toNumber(`${rowData.monthSaleRateDeviationRate}`.replace('%', '')),
          };
          return obj;
        },
        cellRenderer: <DifferenceDisplayer precision={0} />,
      },
    ],
  };

  buildTreeData = arr => {
    if (arr && arr.length > 0) {
      _.forEach(arr, (item, index) => {
        const x = item;
        x.id = index;
      });
      return arr;
    }
    return [];
  };

  render() {
    const { monthSaleRateDeviationList } = this.props;
    const { titleTree } = this.state;
    const headerRenderer = utils.getHeaderRenderer(titleTree, 1);
    const treeData = this.buildTreeData(monthSaleRateDeviationList);
    return (
      <BaseTable
        expandColumnKey="name"
        fixHeight={200}
        columns={titleTree}
        headerHeight={[30, 30]}
        headerRenderer={headerRenderer}
        treeData={treeData}
      />
    );
  }
}
